<html xmlns="http://www.w3.org/1999/xhtml">
<!--
   Copyright 2007 Nico Goeminne (nicogoeminne@gmail.com)

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-->
  <head>
    <title>Creating WTK Location Sample Data</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA9K1YkDoSv7ab5ZNpy7jKoRSNkqYZ2vhDE-J87_S4BEuTB46WEhTQ4bSutMETYeFCAGxideDhBPvI_w" type="text/javascript"></script>
    <script type="text/javascript">

// GMap2 object
var map;
var route;
var lastpoint;

var header = '&lt;waypoints&gt;';
var data = "";
var footer = '&lt;/waypoints&gt;';

function load() {
  if (GBrowserIsCompatible()) {
    route = document.getElementById("route");
    map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(37.87376937332855, -122.41104125976562), 11);
    map.addControl(new GLargeMapControl());
    map.enableScrollWheelZoom();
    map.addOverlay(new GStreetviewOverlay());
    GEvent.addListener(map, "click", handleClicks);
  }
}

function handleClicks(marker, point){
  var time = 0;
  if (lastpoint != null) {
    var poly = new GPolyline([lastpoint, point], "#ff0000");
    map.addOverlay(poly);
    time = Math.floor(3600 * lastpoint.distanceFrom(point) / 50);
  }

  data += '&lt;waypoint time="' + time + '" latitude="' + point.lat() + '" longitude="' + point.lng() + '" altitude="0" /&gt;';
  route.innerHTML = header + data + footer;
  lastpoint = point;
}

function reset(){
  map.clearOverlays();
  map.addOverlay(new GStreetviewOverlay());
  lastpoint = null;
  data = "";
  route.innerHTML ="";
}
    </script>
  </head>

  <body onload="load()" onunload="GUnload()">
    <center>
    <p>Mark each waypoint of your route, by clicking on the map.</p>
    <table>
      <tr>
        <td><div id="map" style="width: 400px; height: 400px;"></div></td>
        <td><div id="route" style="overflow: auto; width:400px; height:400px"></div></td>
      </tr>
    </table>
    <input type="button" value="Reset" onclick="reset();"/>
    </center>
  </body>
</html>